.catebox {
  position: fixed;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--back-color);
  overflow-y: scroll;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}
.catebox .topblankbox {
  width: 100%;
  height: 60px;
}
.catebox .topbox {
  position: fixed;
  top: 0;
  left: 100%;
  transition: all 0.3s ease-in-out;
}
.catebox.show {
  left: 0;
}
.catebox.show .topbox {
  left: 0;
}
.catebox .catebig {
  padding: 0 16px;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  margin-top: 20px;
  color: var(--font-color);
  box-sizing: border-box;
}
.catebox .catecontent {
  display: flex;
  flex-wrap: wrap;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.catebox .catecontent .cateminbox {
  padding: 10px;
  height: 80px;
  margin-top: 10px;
  box-sizing: border-box;
  width: calc(50vw - 21px);
  display: flex;
  align-items: center;
  border-radius: 12px;
  background-color: var(--box-color);
}
.catebox .catecontent .cateminbox:nth-child(2n-1) {
  margin-right: 10px;
}
.catebox .catecontent .cateminbox .imgbox {
  width: 42px;
  height: 100%;
  background-color: blue;
}
.catebox .catecontent .cateminbox .contentbox {
  margin-left: 10px;
}
.catebox .catecontent .cateminbox .contentbox .catetitle {
  color: var(--font-color);
  font-size: 16px;
  font-weight: bold;
}
.catebox .catecontent .cateminbox .contentbox p {
  font-size: 12px;
  color: var(--tips-color);
}
